<template>
  <el-card class="container">
    <el-row type="flex" justify="end" style="margin-bottom: 20px">
      <el-button
        size="medium"
        type="success"
        icon="el-icon-edit"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </el-row>

    <el-form ref="formRef" :model="form" :rules="addRule">
      <!-- 第一行 -->
      <el-row type="flex" justify="space-around">
        <el-col :span="8">
          <el-form-item prop="subjects" label="学科">
            <el-select
              @focus="getSubject"
              v-model="form.subjects"
              placeholder="请选择"
              @change="currentObjiect"
              style="width: 70%"
            >
              <el-option
                v-for="item in form.subjectOption"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="directorys" label="二级目录">
            <el-select
              @focus="getDirectory"
              v-model="form.directorys"
              placeholder="请选择"
              style="width: 70%"
            >
              <el-option
                v-for="item in form.directoryOption"
                :key="item.id"
                :label="item.directoryName"
                :value="item.directoryName"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="tags" label="标签">
            <el-select
              v-model="form.tags"
              @focus="getTags"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                v-for="item in form.tagsOptions"
                :key="item.id"
                :label="item.tagName"
                :value="item.tagName"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="keyValue" label="关键字">
            <el-input v-model="form.keyValue" style="width: 80%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row type="flex" justify="space-around">
        <el-col :span="8">
          <el-form-item prop="questionType" label="试题类型">
            <el-select
              v-model="form.questionType"
              placeholder="请选择"
              style="width: 72%"
            >
              <el-option
                v-for="item in form.questionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="difficult" label="难度">
            <el-select
              v-model="form.difficult"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                v-for="item in form.difficultOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="direction" label="方向">
            <el-select
              v-model="form.direction"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                v-for="(item, index) in form.directionOptions"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="users" label="录入人">
            <el-select
              @focus="getUsers"
              v-model="form.users"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                v-for="item in form.usersOptions"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行11 -->
      <el-row type="flex" justify="space-around" style="margin-bottom: 5px">
        <el-col :span="6">
          <el-form-item prop="notes" label="题目备注">
            <el-input v-model="form.notes" style="width: 72%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="remarks" label="企业简称">
            <el-input v-model="form.remarks" style="width: 72%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row
            type="flex"
            justify="start"
            style="text-align: center"
            :gutter="5"
          >
            <el-form-item prop="citys" label="城市">
              <el-col :span="10">
                <el-select
                  @focus="getCity"
                  v-model="form.citys"
                  placeholder="请选择"
                  @change="currentCity"
                >
                  <el-option
                    v-for="(item, index) in form.cityOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="10">
                <el-select
                  v-model="form.cityOrder"
                  placeholder="请选择"
                  @focus="getCityOrderOptions"
                >
                  <el-option
                    v-for="(item, index) in form.cityOrderOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end" style="width: 90%">
            <el-button size="medium" @click="resetFromdate">清除</el-button>
            <el-button size="medium" type="primary" @click="search"
              >搜索</el-button
            >
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <!-- tabs标签页 -->
    <el-tabs type="card" v-model="activeName">
      <el-alert
        :title="`数据一共${choicestData.length}条`"
        style="margin-bottom: 20px"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <el-tab-pane label="全部" name="first">
        <el-table :data="choicestData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template slot-scope="{ row }">
              {{ row.questionType | emun(emunData.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="150">
            <template slot-scope="{ row }">
              {{ row.question | html2Text }}
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="150">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template slot-scope="{ row }">
              {{ row.difficulty | emun(emunData.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template slot-scope="{ row }">
              {{ row.chkState | emun(emunData.chkType) }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
            <template slot-scope="{ row }">
              {{ row.publishState | emun(emunData.publishType) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="previewDailog(row)">
                预览
              </el-button>
              <el-button
                @click="auditDailog(row)"
                type="text"
                size="small"
                :disabled="row.chkState === 1 ? true : false"
              >
                审核
              </el-button>
              <el-button
                :disabled="row.publishState === 1 ? true : false"
                @click="$router.push('/questions/new?id=' + row.id)"
                type="text"
                size="small"
              >
                修改 </el-button
              ><el-button @click="publishDailog(row)" type="text" size="small">
                {{ row.publishState === 1 ? "下架" : "上架" }}
              </el-button>
              <el-button
                :disabled="row.publishState === 1 ? true : false"
                @click="deleteDailog(row)"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-row type="flex" justify="end" style="margin-top: 20px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageList.page"
            :page-sizes="[4, 6, 8, 10]"
            :page-size="pageList.pagesize"
            layout=" prev,pager,next,sizes,jumper"
            :total="pageList.total"
          >
          </el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="待审核" name="second">
        <el-table :data="peddingData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template slot-scope="{ row }">
              {{ row.questionType | emun(emunData.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="150">
            <template slot-scope="{ row }">
              {{ row.question | html2Text }}
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="150">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template slot-scope="{ row }">
              {{ row.difficulty | emun(emunData.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template slot-scope="{ row }">
              {{ row.chkState | emun(emunData.chkType) }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
            <template slot-scope="{ row }">
              {{ row.publishState | emun(emunData.publishType) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="previewDailog(row)">
                预览
              </el-button>
              <el-button
                @click="auditDailog(row)"
                type="text"
                size="small"
                :disabled="row.chkState === 1 ? true : false"
              >
                审核
              </el-button>
              <el-button
                :disabled="row.publishState === 1 ? true : false"
                @click="$router.push('/questions/new?id=' + row.id)"
                type="text"
                size="small"
              >
                修改 </el-button
              ><el-button @click="publishDailog(row)" type="text" size="small">
                {{ row.publishState === 1 ? "下架" : "上架" }}
              </el-button>
              <el-button
                :disabled="row.publishState === 1 ? true : false"
                @click="deleteDailog(row)"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-row type="flex" justify="end" style="margin-top: 20px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageList.page"
            :page-sizes="[4, 6, 8, 10]"
            :page-size="pageList.pagesize"
            layout=" prev,pager,next,sizes,jumper"
            :total="pageList.total"
          >
          </el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="已审核" name="third">
        <el-table :data="verifiedData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template slot-scope="{ row }">
              {{ row.questionType | emun(emunData.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="150">
            <template slot-scope="{ row }">
              {{ row.question | html2Text }}
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="150">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template slot-scope="{ row }">
              {{ row.difficulty | emun(emunData.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template slot-scope="{ row }">
              {{ row.chkState | emun(emunData.chkType) }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
            <template slot-scope="{ row }">
              {{ row.publishState | emun(emunData.publishType) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="previewDailog(row)">
                预览
              </el-button>
              <el-button
                @click="auditDailog(row)"
                type="text"
                size="small"
                :disabled="row.chkState === 1 ? true : false"
              >
                审核
              </el-button>
              <el-button
                :disabled="row.publishState === 1 ? true : false"
                @click="$router.push('/questions/new?id=' + row.id)"
                type="text"
                size="small"
              >
                修改 </el-button
              ><el-button @click="publishDailog(row)" type="text" size="small">
                {{ row.publishState === 1 ? "下架" : "上架" }}
              </el-button>
              <el-button
                :disabled="row.publishState === 1 ? true : false"
                @click="deleteDailog(row)"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-row type="flex" justify="end" style="margin-top: 20px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageList.page"
            :page-sizes="[4, 6, 8, 10]"
            :page-size="pageList.pagesize"
            layout=" prev,pager,next,sizes,jumper"
            :total="pageList.total"
          >
          </el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="已拒绝" name="fourth">
        <el-table :data="refuseData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template slot-scope="{ row }">
              {{ row.questionType | emun(emunData.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="150">
            <template slot-scope="{ row }">
              {{ row.question | html2Text }}
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="150">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template slot-scope="{ row }">
              {{ row.difficulty | emun(emunData.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template slot-scope="{ row }">
              {{ row.chkState | emun(emunData.chkType) }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
            <template slot-scope="{ row }">
              {{ row.publishState | emun(emunData.publishType) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="previewDailog(row)">
                预览
              </el-button>
              <el-button
                @click="auditDailog(row)"
                type="text"
                size="small"
                :disabled="row.chkState === 1 ? true : false"
              >
                审核
              </el-button>
              <el-button
                :disabled="row.publishState === 1 ? true : false"
                @click="$router.push('/questions/new?id=' + row.id)"
                type="text"
                size="small"
              >
                修改 </el-button
              ><el-button @click="publishDailog(row)" type="text" size="small">
                {{ row.publishState === 1 ? "下架" : "上架" }}
              </el-button>
              <el-button
                :disabled="row.publishState === 1 ? true : false"
                @click="deleteDailog(row)"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-row type="flex" justify="end" style="margin-top: 20px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageList.page"
            :page-sizes="[4, 6, 8, 10]"
            :page-size="pageList.pagesize"
            layout=" prev,pager,next,sizes,jumper"
            :total="pageList.total"
          >
          </el-pagination>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!-- 预览弹窗 -->
    <el-dialog title="提示" :visible.sync="prevdialogVisible" width="50%">
      <el-row :gutter="20" style="padding-bottom: 20px">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【题型】:
            {{ previewData.questionType | emun(emunData.questionType) }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【编号】: {{ previewData.id }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【难度】: {{ previewData.difficulty | emun(emunData.difficulty) }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【标签】: {{ previewData.tags }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 0px">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【学科】: {{ previewData.subjectName }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【目录】: {{ previewData.directoryName }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【方向】: {{ previewData.direction }}
          </div>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20" style="padding-bottom: 10px">
        <el-col :span="6">
          <div class="grid-content bg-purple">【题干】:</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding-bottom: 10px; color: blue">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{ previewData.question | html2Text }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding-bottom: 10px">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            单选题选项:(以下选中的为正确答案)
          </div>
        </el-col>
      </el-row>
      <el-checkbox-group size="mini" v-model="radio">
        <el-row type="flex" style="flex-direction: column">
          <el-checkbox
            v-for="(item, index) in previewData.options"
            :key="index"
            :label="item.title"
            style="height: 30px"
          ></el-checkbox>
        </el-row>
      </el-checkbox-group>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            【参考答案】:
            <el-button
              type="danger"
              @click="videoChange"
              style="margin-bottom: 5px"
              >在线预览</el-button
            >
            <video
              v-if="videoAtuo"
              :src="previewData.videoURL"
              controls="controls"
              style="width: 100%"
            ></video>
          </div>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            【答案解析】:
            {{ previewData.answerID ? previewData.answerID : "无" }}
          </div>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            【答案备注】:{{ previewData.remarks }}
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="prevdialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 审核弹窗 -->
    <el-dialog
      title="题目审核"
      :visible.sync="checkdialogVisible"
      width="30%"
      @close="btnCancle"
    >
      <el-form ref="auditRef" :model="auditForm" :rules="auditRules">
        <el-form-item prop="audit">
          <el-radio-group v-model="auditForm.audit">
            <el-radio label="通过"></el-radio>
            <el-radio label="拒绝"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            placeholder="请输入审核意见"
            v-model="auditForm.auditArea"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancle">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </span>
    </el-dialog>
    <!-- 上下架弹窗 -->
    <el-dialog title="提示" :visible.sync="publishDialogVisible" width="30%">
      <i class="el-icon-warning" style="color: #e6a23c; margin-right: 3px"></i
      ><span>你确定{{ publishState === 1 ? "下架" : "上架" }}这道题目吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="publishDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="publishStatus">确 定</el-button>
      </span>
    </el-dialog>
    <!--删除弹窗 -->
    <el-dialog title="提示" :visible.sync="deleteDailogVisible" width="30%">
      <i class="el-icon-warning" style="color: #e6a23c; margin-right: 3px"></i
      ><span>此操作将永久删除该题目，继续吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDailogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteQuestions">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { list as directorys } from '@/api/hmmm/directorys.js'
import { list as tags } from '@/api/hmmm/tags.js'
import { list as users } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
// eslint-disable-next-line no-unused-vars
import {
  choice,
  detail,
  choiceCheck,
  choicePublish,
  remove
} from '@/api/hmmm/questions.js'
import {
  chkType,
  publishType,
  difficulty,
  questionType
} from '@/api/hmmm/constants.js'
// import { formatTime, parseTime } from '@/utils/index.js'
export default {
  name: 'questionsChoice',
  data () {
    return {
      activeName: 'first',
      form: {
        objectId: '',
        subjectOption: [], // 学科
        subjects: '',
        directoryOption: [], // 二级目录
        directorys: '',
        tagsOptions: [], // 标签
        tags: '',
        keyValue: '', // 关键字
        questionOptions: [
          {
            value: 'o2o',
            label: '单选'
          },
          {
            value: '外包服务',
            label: '多选'
          },
          {
            value: 3,
            label: '简单'
          }
        ], // 试题类型
        questionType: '',
        difficultOptions: [
          {
            value: 1,
            label: '简单'
          },
          {
            value: 2,
            label: '一般'
          },
          {
            value: 3,
            label: '困难'
          }
        ], // 试题类型
        difficult: '',
        directionOptions: [
          'o2o',
          '外包服务',
          '企业服务',
          '互联网金融',
          '企业咨询',
          '互联网',
          '电子商务',
          '其他'
        ],
        direction: '', // 方向
        queryList: {
          page: 1,
          pagesize: 10,
          keyword: true,
          toatl: ''
        },
        usersOptions: [], // 录入人
        users: '',
        notes: '',
        remarks: '', // 企业简写
        cityOptions: [], // 城市
        citys: '', // 城市
        cityId: '', // 城市id
        cityOrder: '',
        cityOrderOptions: [] // 城市下地区
      },
      choicestData: [], // 精选数据
      peddingData: [], // 待审核
      verifiedData: [], // 已审核
      refuseData: [], // 已拒绝
      addRule: {
        subjects: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ]
        // keyValue: [{ required: true, message: '请填写关键字', trigger: 'blur' }]
      },
      emunData: {
        chkType: chkType,
        publishType: publishType,
        difficulty: difficulty,
        questionType: questionType
      }, // 枚举类数据
      currentPage: 1, // 默认页码
      pageList: {
        page: 1, // 当前页
        pagesize: 8, // 当前页条数
        total: 0
      },
      prevdialogVisible: false, // 预览
      previewData: {}, // 预览数据
      radio: '',
      videoAtuo: false, // 视频
      checkdialogVisible: false, // 审核
      auditForm: {
        audit: '',
        auditArea: ''
      },
      auditRules: {
        audit: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ]
      },
      auditList: [
        {
          value: '通过',
          label: 1
        },
        {
          value: '拒绝',
          label: 2
        }
      ], // 审核拒绝和同意的状态
      submitId: null, // 审核确定请求参数的id
      publishDialogVisible: false,
      publishId: null, // 上下架需要的id
      deleteDailogVisible: false,
      deleteId: null,
      publishState: null // 上架下架的状态
    }
  },
  async created () {
    this.getChoicest()
    this.peddingCheck()
    this.verified()
    this.refuse()
  },
  filters: {
    emun: (val, array) => {
      const f = array.find(e => e.value === +val)
      return f ? f.label : null
    }
  },
  methods: {
    // 已拒绝
    async refuse () {
      const { data } = await choice({ chkState: 2, ...this.pageList })
      console.log(data)
      this.refuseData = data.items
      this.pageList.total = data.counts
    },
    // 已通过
    async verified () {
      const { data } = await choice({ chkState: 1, ...this.pageList })
      console.log(data)
      this.verifiedData = data.items
      this.pageList.total = data.counts
    },
    // 待审核
    async peddingCheck () {
      const { data } = await choice({ chkState: 0, ...this.pageList })
      this.peddingData = data.items
      this.pageList.total = data.counts
    },
    emunChange (val, array) {
      const f = array.find(e => e.value === val)
      return f ? f.label : '未知'
    },
    // 删除弹框
    deleteDailog (row) {
      this.deleteDailogVisible = true
      this.deleteId = row.id
    },
    // 删除数据
    async deleteQuestions () {
      await remove({ id: this.deleteId })
      this.$message.success('删除成功')
      this.getChoicest()
      this.deleteDailogVisible = false
    },
    // 上下架弹窗
    publishDailog (row) {
      this.publishDialogVisible = true
      this.publishId = row.id
      this.publishState = row.publishState
    },
    // 上下架
    async publishStatus () {
      // console.log(this.publishState)
      await choicePublish({
        id: this.publishId,
        publishState: this.publishState === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      this.getChoicest()
      this.publishDialogVisible = false
    },
    // 关闭和取消表单
    btnCancle () {
      this.$refs.auditRef.resetFields()
      this.checkdialogVisible = false
      this.auditForm.auditArea = ''
    },
    // 确认审核
    async onSubmit () {
      // 转换通过和拒绝值
      /*  const emun = (val, array) => {
        const f = array.find(e => e.value === val)
        return f ? f.label : '未知'
      } */
      const chkState = this.emunChange(this.auditForm.audit, this.auditList)
      console.log(chkState)
      // console.log(this.submitId)
      const reslut = await this.$refs.auditRef.validate()
      if (!reslut || this.auditForm.auditArea === '') {
        this.$message.warning('请输入审核意见')
      } else {
        await choiceCheck({
          id: this.submitId,
          chkState: chkState,
          chkRemarks: this.auditForm.auditArea
        })
        this.$message.success('审核成功')
        this.getChoicest()
        this.checkdialogVisible = false
      }
    },
    // 审核
    auditDailog (row) {
      this.checkdialogVisible = true
      this.submitId = row.id
    },
    // 视频预览
    videoChange () {
      this.videoAtuo = !this.videoAtuo
    },
    async previewDailog (row) {
      this.prevdialogVisible = true
      const { data } = await detail({ id: row.id })
      console.log(data)
      this.previewData = data
      // console.log(this.previewData.options)
      const f = this.previewData.options.filter(t => t.isRight === 1)
      const newf = []
      f.forEach(e => newf.push(e.title))
      this.radio = newf
      this.videoAtuo = false
      // console.log(newf)
    },
    // page改变
    handleCurrentChange (val) {
      this.pageList.page = val
      this.getChoicest()
    },
    // pagesize改变
    handleSizeChange (val) {
      this.pageList.pagesize = val
      this.getChoicest()
    },
    // 精选题库
    async getChoicest () {
      const { data } = await choice({ ...this.pageList })
      this.choicestData = data.items
      this.pageList.total = data.counts
    },
    // 搜索
    async search () {
      const { data } = await choice({
        subjectID: this.form.objectId,
        ...this.pageList
      })
      this.choicestData = data.items
      this.pageList.total = data.counts
      console.log(11)
    },
    // 清除
    resetFromdate () {
      this.$refs.formRef.resetFields()
    },
    currentCity (val) {
      this.form.cityId = val
      // console.log(this.cityId)
    },
    getCityOrderOptions () {
      this.form.cityOrderOptions = citys(this.form.cityId)
      // console.log(this.cityOrderOptions)
    }, // 获取城市下地区
    getCity () {
      this.form.cityOptions = provinces()
      // console.log(this.cityOptions)
    },
    async getSubject () {
      const {
        data
      } = await simple()
      this.form.subjectOption = data
      // console.log(this.subjectOption)
    },
    currentObjiect (val) {
      this.form.objectId = val
      // console.log(this.objectId)
    },
    async getDirectory () {
      // this.currentObjiect()
      // console.log(this.objectId)
      const {
        data: { items }
      } = await directorys({ subjectID: this.form.objectId })
      this.form.directoryOption = items
      // console.log(this.directoryOption)
    },
    async getTags () {
      const {
        data: { items }
      } = await tags({ subjectID: this.form.objectId })
      this.form.tagsOptions = items
    },
    async getUsers () {
      const {
        data: { list }
      } = await users(this.form.queryList)
      this.form.usersOptions = list
    }
  }
}
</script>

<style scoped lang="scss">
/* .el-xbutton{
  display: flex;
  justify-content: flex-end;
} */
/* ::v-deep .el-from{
  display: flex;
} */
</style>
